<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const echartBar = ref(null);
let chartData = ref([]);  // 存储API数据

// 初始化饼图
// 初始化雷达图
function initializeChart() {
  const myChart = echarts.init(echartBar.value, "dark");

  // 监听窗口尺寸变化，并调用 myChart.resize() 来调整图表大小
  window.addEventListener('resize', () => {
    myChart.resize();
  });

  // 构造雷达图数据
  const seriesData = [{
    name: '热度',
    value: chartData.value.map(item => item.value)
  }];

  const option = {
    title: {
      text: '出版社热度排名分析',  // 修改标题
      left: 'center',
      textStyle: {
        color: '#FFF',
        fontWeight: 'bold',
        fontSize: '20px'
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['热度'],  // 雷达图只有一个系列
      textStyle: {
        color: '#FFFFFF',
        fontSize: '15px'
      }
    },
    radar: {
      indicator: chartData.value.map(item => ({
        name: item.name,
        max: Math.max(...chartData.value.map(i => i.value))  // 根据数据动态设置雷达图的最大值
      })),
      radius: '70%',  // 雷达图半径
      splitNumber: 5, // 网格的分割数
      name: {
        textStyle: {
          color: '#FFF'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#444444'
        }
      },
      splitArea: {
        areaStyle: {
          color: 'rgba(0, 0, 0, 0.1)'  // 网格区域背景色
        }
      }
    },
    series: [
      {
        name: '热度',
        type: 'radar',
        data: seriesData,
        itemStyle: {
          color: '#FF7F50'  // 雷达图区域颜色
        },
        emphasis: {
          itemStyle: {
            color: '#FFA500'  // 鼠标悬停颜色
          }
        }
      }
    ]
  };

  myChart.setOption(option);
}


// 请求接口数据
function fetchData() {
  axios.get('/book-api/queryAllAdsPublisherPopularityRank')  // 请求出版社热度排名API
      .then(response => {
        chartData.value = response.data.data;  // 存储返回数据
        initializeChart();  // 渲染图表
      })
      .catch(error => {
        console.error('数据获取失败:', error);
      });
}

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div ref="echartBar" class="chart-container"></div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;  /* 确保容器的高度为100% */
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 8px;
  bottom: 1%;
  position: relative; /* 确保可以撑开 */
}
</style>

